:local(.BpmnEditor) {
  display: flex;
  flex: 1;

  flex-direction: row;

  .diagram {
    flex: 1;
    position: relative;
  }

  .properties {
    flex: none;
  }

  /**
   * Fix properties tabbing
   */
  .bpp-properties-tabs-links > .bpp-active a {
    position: relative;

    &:before {
      content: '';
      z-index: 5;
      bottom: -2px;
      left: 0;
      right: 0;
      border-bottom: solid 3px var(--silver-base-97);
      position: absolute;
    }
  }

  .djs-minimap {

    .toggle:hover {
      color: var(--blue-darken-48);
    }

    &:not(.open) .toggle:before {
      content: '\f278';
      font-family: 'app';
      font-size: 20px;
    }

    &.open {
      .toggle {
        padding: 3px 5px;
        margin-right: 4px;

        line-height: 24px;
        text-align: right;

        opacity: 0.5;
      }

      .toggle:before {
        content: '\e80a';
        font-family: 'app';
        font-size: 14px;
      }

      .toggle:hover {
        opacity: 1;
      }

      .viewport-dom {
        border-color: var(--blue-base-65);
      }
    }
  }

}

:local(.Color) {
  border: solid 1px var(--color-444444);
  margin: 4px;
  width: 64px;
  height: 16px;
}